From: James D. Forrester <jforrester@wikimedia.org>
Date: Mon, 19 Sep 2016 15:41:44 +0000 (-0700)
Subject: OOjs UI: FieldsetLayout: Styling fixes for `<legend>` labels
X-Git-Tag: 1.31.0-rc.0~5485
X-Git-Url: http://git.cyclocoop.org/%7D%7Cconcat%7B?a=commitdiff_plain;h=2a00a6e2561d7633540cceb6917dffab560a31d2;p=lhc%2Fweb%2Fwiklou.git

OOjs UI: FieldsetLayout: Styling fixes for `<legend>` labels

[Backport from OOjs UI master as this fixes a significant regression.]

* Make the `<legend>` 'display: inline-table' rather than 'table'.
  A block-level table would push down elements that follow it,
  including the "help" icon, which in turn messed up the fields.
  Fixes T145682, T145678 and first half of T145680.
* Only style .oo-ui-labelElement-label with margin and padding
  if we have the .oo-ui-labelElement class (label is not empty).
  Fixes second half of T145680.

Follow-up to 9cf8b941a9c618f1d7ba2512508f576f70116e1e.

Bug: T145682
Bug: T145678
Bug: T145680
Change-Id: Id95f4167afa6c000d6d2fa2ad7a62b65b6d4d53b
---

diff --git a/resources/lib/oojs-ui/oojs-ui-core-apex.css b/resources/lib/oojs-ui/oojs-ui-core-apex.css
index a4479f7c45..6437ca8108 100644
--- a/resources/lib/oojs-ui/oojs-ui-core-apex.css
+++ b/resources/lib/oojs-ui/oojs-ui-core-apex.css
@@ -401,7 +401,7 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 }
 .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-labelElement-label {
 	color: inherit;
-	display: table;
+	display: inline-table;
 	box-sizing: border-box;
 	max-width: 100%;
 	padding: 0;
@@ -421,7 +421,7 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 .oo-ui-fieldsetLayout + .oo-ui-formLayout {
 	margin-top: 2em;
 }
-.oo-ui-fieldsetLayout > .oo-ui-labelElement-label {
+.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-labelElement-label {
 	font-size: 1.1em;
 	margin-bottom: 0.5em;
 	padding: 0.25em 0;
diff --git a/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
index 09e6cfc524..08d91b4c3b 100644
--- a/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
@@ -524,7 +524,7 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 }
 .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-labelElement-label {
 	color: inherit;
-	display: table;
+	display: inline-table;
 	box-sizing: border-box;
 	max-width: 100%;
 	padding: 0;
@@ -544,7 +544,7 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 .oo-ui-fieldsetLayout + .oo-ui-formLayout {
 	margin-top: 2em;
 }
-.oo-ui-fieldsetLayout > .oo-ui-labelElement-label {
+.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-labelElement-label {
 	margin-bottom: 0.5em;
 	font-size: 1.1em;
 	font-weight: bold;